<template>
  <el-dialog
    v-model="visibleAlter"
    width="90%"
    align-center
    title="商品立即上架必填信息补充"
    modal-class="select-info-detail-dialog"
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <div class="select-info-detail">
      <div v-loading="loading">
        <div class="info-wrap pl20 pr20">
          <div class="left">
            <img :src="optionInfo.data.mainPicUrl" alt="" />
          </div>
          <div class="right">
            <h1 class="text-over">{{ optionInfo.data.productName }}</h1>
            <p>上架类目：{{ getCategoryName(optionInfo.data.categoryId) }}</p>
          </div>
        </div>
        <div class="block mb40"></div>
        <!-- <div v-if="JSON.stringify(_optionInfo.editDetailInfo) !== '{}'"> -->
        <baseinfo
          ref="baseinfoRef"
          :optionInfo="_optionInfo"
          :Enums="Enums"
          :categoryId="optionInfo.categoryId"
          :itemWidth="'80%'"
        ></baseinfo>
        <attr
          ref="attrRef"
          :optionInfo="_optionInfo"
          :Enums="Enums"
          :Provides="Provides"
          :categoryId="optionInfo.categoryId"
          :itemWidth="'80%'"
        ></attr>
        <div class="block mb40"></div>
        <sku ref="skuRef" :optionInfo="_optionInfo" :Enums="Enums" :categoryId="optionInfo.categoryId"></sku>
        <!-- </div> -->
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" class="jzt-button" @click="clickClose">取消</el-button>
        <el-button type="primary" @click="clickSubmit" :loading="btnLoading">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getcategoryList2,
  getAgreementList,
  getEnumAll,
  getDictList,
  getProvideList,
  getSuppliers,
  saveProduct,
  getProductDetail,
  eidtProduct,
  getCopyDetail
} from "@/apis/products/specifications";
import baseinfo from "./baseinfo.vue";
import attr from "@/views/products/manage/components/attr.vue";
import sku from "@/views/products/manage/components/sku.vue";
import { findAncestorsById } from "@/utils";

const loading = ref(false);
const visibleAlter = ref(false);
const _optionInfo = ref({
  actionType: "edit",
  editDetailInfo: {}
});
const Enums = ref([]);
const Provides = ref([]);
const baseinfoRef = ref();
const attrRef = ref();
const skuRef = ref();
const editInfo = ref({});

const emit = defineEmits(["close", "submit"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false,
        categoryId: "",
        collectId: ""
      };
    }
  },
  btnLoading: {
    type: Boolean,
    default: false
  }
});
watch(
  () => props.optionInfo,
  async val => {
    visibleAlter.value = val.isShow;
    if (val.isShow) {
      loading.value = true;
      console.log("父级传递过来的分类id", val);
      const _Enums = await getEnumAll(); //查询完整的数据字典
      const _zhEnums = await getDictList(); //查询租户的数据字典
      // const _zhEnums = { data: [{}] };
      Enums.value = [..._Enums.data, ..._zhEnums.data];
      const _Provides = await getSuppliers(); //查询供应商列表
      Provides.value = _Provides.data;

      // 查询商品详情数据
      getProductDetail({ collectId: val.collectId }).then(res => {
        if (res.code === 200) {
          _optionInfo.value.editDetailInfo = res.data;
          loading.value = false;
        }
      });
    }
  },
  { deep: true }
);

onMounted(async () => {});

const getDetail = () => {};

/**
 * 获取上架类目
 */
const getCategoryName = val => {
  const arr = findAncestorsById(val, props.optionInfo.categoryList, "categoryId");
  const nameArr = arr?.map(item => item.name) || [];
  // console.log("11111", arr);
  return nameArr.join(" > ");
};

const clickSubmit = async () => {
  const flag = await nextStep(false);
  flag && reportPoducts();
  emit("submit", { ..._optionInfo.value.editDetailInfo, ...editInfo.value });
};
const reportPoducts = () => {
  const _Params = JSON.parse(JSON.stringify(Params.value));
  delete _Params.shopDetail;
  editInfo.value = _Params;
  // console.log("编辑的参数===", _Params);
};

const Params = ref({});
const nextStep = async (isNext = true) => {
  let flag = false;
  await Promise.all([baseinfoRef.value.getBaseInfo(), attrRef.value.getAttrForm(), skuRef.value.getSkuList()]).then(res => {
    const params = {
      ...res[0],
      ...res[1],
      specificationList: res[2].specesList,
      businessSkuList: res[2].skuList
    };
    Params.value = params;
    console.log("发布商品数据===", params);
    flag = true;
  });
  return flag;
};

const clickClose = () => {
  emit("close");
};
</script>
<style lang="scss">
.select-info-detail-dialog {
  .el-dialog {
    padding: 0 !important;
    padding-top: 16px !important;
    .el-dialog__header {
      padding-left: 20px;
    }
    .el-dialog__footer {
      padding: 14px 20px;
      box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
      position: relative;
      z-index: 22;
    }
  }
}
</style>
<style lang="scss" scoped>
.select-info-detail {
  height: 600px;
  overflow-y: auto;
  .block {
    height: 20px;
    background-color: #f5f7fa;
  }
  .info-wrap {
    display: flex;
    margin: 10px 0 20px 0;
    align-items: center;
    .left {
      margin-right: 20px;
      img {
        width: 93px;
        height: 93px;
        border-radius: 4px;
      }
    }
    .right {
      h1 {
        font-size: 18px;
        color: #007dff;
        width: 390px;
      }

      p {
        color: #4e5969;
      }
    }
  }
}
</style>
